import React, {useEffect, useState} from 'react';
import ProForm, {ModalForm} from "@ant-design/pro-form";
import {message, Select} from "antd";
import {getUserGroup, singleUserGroup} from "@/services/ant-design-pro/users";

const SingleUser = (props) => {
  const {isSingle,SetIsSingle,actionRef,record,divideInto} = props;
  const [single,SetSingle] = useState([])
  const [newValue,setNewValue] = useState({})
  const { Option } = Select;


  useEffect(async ()=>{
    const list = await getUserGroup();
    SetSingle(list.data)
  },[])

  return (
    <div>
      <ModalForm
        visible={isSingle}
        trigger={
          <h4>设置分组</h4>
        }
        title='设置用户分组'
        onVisibleChange={SetIsSingle}
        onFinish={async ()=>{
          await singleUserGroup(record,{group_id:newValue})
          message.success('修改成功！')
          SetIsSingle(false)
          actionRef.current?.reload();
        }}
      >
        <ProForm
          submitter={false}
        >
         <Select defaultValue={divideInto} style={{width:'100%'}} onSelect={(values)=>{
           setNewValue(values)
         }}>
           {
             single.map(item=>{
               return <Option value={item.id} key={item.name}>{item.nickname}</Option>
             })
           }
         </Select>
        </ProForm>
      </ModalForm>
    </div>
  );
};

export default SingleUser;
